<template>
  <div class="zm-box2">
    <div class="zm-box2-bg">
      <div class="zm-box2-bg-t"></div>
      <div class="zm-box2-bg-m"></div>
      <div class="zm-box2-bg-b"></div>
    </div>
    <div class="zm-box2-title">{{title}}</div>
    <div class="zm-box2-main">
      <slot />
    </div>
  </div>
</template>

<script>
/*
  功能描述  ZmBox1
  创建人    zgf
  更新时间  2019/06/04
  备注      
*/
export default {
  name: "ZmBox1",
  props: {
    title:{
      type:String,
      default:''
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less">
@import "../../css/var.less";
@import "../../css/mixin.less";
.zm-box2 {
  position: relative;
  &-bg {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 0;
    flex-direction: column;
    &-t,&-m,&-b{
      height: 10rem;
      background-image: url(../../../public/images/zm-box2.png);
      background-size: 100% auto;
      background-position: left top;
    }
    &-m {
      flex: 1;
      height: 0;
      background-size: 100% 10000%;
      background-position: left center;
    }
    &-b {
      height: 10rem;
      background-size:100% auto;
      background-position: left bottom;
    }
  }
  &-title{
    position: absolute;
    left: 0;
    right:0;
    width: 100%;
    text-align: center;
    top: 1.3rem;
    font-size: 1rem;
    color: #84AEFC;
  }
  &-main{
    position: relative;
    z-index: 2;
    padding: 3.6rem 0.5rem 0.5rem 0.5rem;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
